<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="12%"></el-aside>
      <el-main>
        <div id="settingMain">
          <div id="setting">
            <h2>bark</h2>
            <el-form>
              <el-form-item label="推送地址">
                <div class="mt-4">
                  <el-input
                      v-model="barkUrl"
                      placeholder="推送地址:"
                      class="input-with-select"
                      @input="barkUrlChange = true"
                      @keyup.enter="saveBarkUrl"
                  >
                    <template #prepend>
                      <el-select v-model="barkUrlSelect" placeholder="推送地址" style="width: 170px">
                        <el-option v-for="item in barkUrlSelectOps" :label="item.label" :value='item.value' />
                      </el-select>
                    </template>
                  </el-input>
                  <el-icon class="promptIcon" :size="promptIconSize" v-show="barkUrlChange">
                    <WarningFilled v-if="promptIconShow" class="waringIcon" @click="saveBarkUrl"/>
                    <SuccessFilled v-else/>
                  </el-icon>
                </div>
              </el-form-item>
              <el-form-item label="推送标题:">
                <div class="mt-4">
                  <el-input
                      v-model="barkTitle"
                      placeholder="推送标题"
                      class="input-with-select"
                      @input="titleChange = true"
                      @keyup.enter="saveBarkTitle"
                  >
                  </el-input>
                  <el-icon class="promptIcon" :size="promptIconSize" v-show="titleChange">
                    <WarningFilled v-if="titleIconShow" class="waringIcon" @click="saveBarkTitle"/>
                    <SuccessFilled v-else/>
                  </el-icon>
                </div>
              </el-form-item>
              <el-form-item label="推送图标:">
                <div class="mt-4">
                  <el-input
                      v-model="barkIcon"
                      placeholder="网络图片地址"
                      class="input-with-select"
                      @input="iconChange = true"
                      @keyup.enter="saveBarkIcon"
                  >
                  </el-input>
                  <el-icon class="promptIcon" :size="promptIconSize" v-show="iconChange">
                    <WarningFilled v-if="iconShow" class="waringIcon" @click="saveBarkIcon"/>
                    <SuccessFilled v-else/>
                  </el-icon>
                </div>
              </el-form-item>
              <el-form-item label="图标:">
                <el-image :src="settings.barkIcon" alt="push icon" width="30px" height="30px"/>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import {ref} from "vue";
import { WarningFilled,SuccessFilled } from '@element-plus/icons-vue'
import { put,settings } from '/public/preload'

//bark url
const barkUrl = ref(settings.barkUrl);
console.log('const barkUrl = ref(settings.barkUrl);' + barkUrl.value)
const barkUrlSelect = ref(settings.value);
const barkUrlSelectOps = [
  {
    value: '1',
    label: 'https://api.day.app/',
  },
  {
    value: '2',
    label: 'https://',
  },
  {
    value: '3',
    label: 'http://',
  }
];

// bark title
const barkTitle = ref(settings.barkTitle);

//bark icon
const  barkIcon = ref(settings.barkIcon);

//bark url icon
const promptIconSize = '20px';
const promptIconShow = ref(true);
const barkUrlChange = ref(false);

//bark title icon
const titleIconShow = ref(true);
const titleChange = ref(false);

//bark 图标 icon
const iconShow = ref(true);
const iconChange = ref(false);

//save bark url
async function saveBarkUrl() {
  barkUrl.value.trim();
  if (barkUrl.value.at(0) === '/') {
    barkUrl.value = barkUrl.value.slice(1);
  }
  const index = Number(barkUrlSelect.value) - 1;
  settings.wholeBarkUrl = barkUrlSelectOps[index].label + barkUrl.value;
  await put('barkUrl', settings.wholeBarkUrl);
  settings.barkUrlIsNull = false;
  promptIconShow.value = false;
}
//save bark title
async function saveBarkTitle() {
  barkTitle.value.trim();
  if (barkTitle.value === '') {
    return;
  }
  await put('barkTitle', barkTitle.value);
  settings.barkTitle = barkTitle.value;
  titleIconShow.value = false;
}
//save bark icon
async function saveBarkIcon() {
  barkIcon.value.trim();
  if (barkIcon.value === '') {
    return;
  }
  await put('barkIcon', barkIcon.value);
  settings.barkIcon = barkIcon.value;
  iconShow.value = false;
}
</script>
<style scoped>
#settingMain{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#setting{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.input-with-select{
  background-color: var(--el-fill-color-blank);
  width: 500px;
}
.promptIcon{
  padding: 6px;
}
.waringIcon{
  cursor: pointer;
}
</style>